<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        /*
        pr代表第一个promise.resolve(),后面每个promise用对应数子代表
        p代表pending
        micro:微队列
        main:主线程
 
        1. 分析promise状态
        pr1: fufill,向微队列添加then回调 t0
        p0: p , pres:p
 
        pr2: fufill, 也向微队列加入then回调 t1
        p2:p,p3:p,p5:p,p6:p
 
        micro: t0 t1
        main； 
 
        2. 从微队列执行t0, 此时to返回一个promise, 根据规范，pr1的then的状态由返回的promise决定，因此此时相当于
        Promise.resolve(4).then(()=> 完成p0), 也就是在返回的promise中完成p0, 同时会将这个直接丢进微队列排队
 
        因此执行了t0,微队列变成这样
        micro: t1 Promise.resolve(4).then(()=> 完成p0)
        main: 0
 
        3. 执行t1,t1的then直接进队列排队,t2
        micro: Promise.resolve(4).then(()=> 完成p0) t2
        main:0 1
 
        4. 执行 Promise.resolve(4).then(()=> 完成p0) 将then的()=> 完成p0进micro
        micro:t2 ()=> 完成p0
        main:0 1
        5. 执行 t2,接着将t2的then,t3进micro
         micro:()=> 完成p0 t3
        main:0 1 2
 
        6. 执行()=> 完成p0， 将t4进micro
          micro: t3 t4
           main:0 1 2 
 
       7. 执行t3,将 t5进micro
            micro:  t4 t5
           main:0 1 2  3
 
       8. 执行 t5, 将t6进micro
 
          micro:   t5 t6
           main:0 1 2  3 4
 
     .. 继续这样下去
        
        */


        Promise.resolve().then(() => {
            console.log('[ 0 ] >', 0)
            return Promise.resolve(4) // 重点就是这会产生Promise.resolve(4).then(()=> 完成p0)进micro排队，会造成空两个then
        })
            .then((res) => {

                console.log(res)
            })

        Promise.resolve().then(() => {
            console.log('[1 ] >', 1)
        })
            .then(() => {
                console.log('[ 2 ] >', 2)
            })
            .then(() => {
                console.log('[ 3] >', 3)
            })
            .then(() => {
                console.log('[ 5] >', 5)
            })
            .then(() => {
                console.log('[ 6] >', 6)
            })


    </script>

</body>

</html>